<template>
  <div id="bmsIcon">
    <el-select v-model="chooseIconName" clearable @change="handleChange">
      <el-option v-for="item in optionsIcon" :key="item.value" :label="item.label" :value="item.value"> 
        <span style="float: left;">
          <i :class=item.value></i>
        </span> 
        <span style="padding-left: 6px;">{{ item.label }}</span> 
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { queryAllIconfont } from '@/assets/js/iconfont.js'
export default {
  name: 'bmsIcon',
  props: ['value'],
  data() {
    return {
      chooseIconName: '',
      optionsIcon: [],
    }
  },
  methods: {
    handleChange(val) {
      this.$emit("input",val)
    }
  },
  created() {
    this.optionsIcon = queryAllIconfont()
  },
  mounted() {
    this.chooseIconName = this.value
  }
}
</script>

<style scoped lang="scss">

.el-input , .el-select { 

  /deep/ .el-input__inner {
    height: 32px;
    font-size: 13px;
    box-shadow: none;
    width: 400px;
    border: 1px solid #e9e9e9;
    border-radius: 20px;
  }

}

 
</style>
